<template>
  <view>
    <!-- 列表区域 -->
    <scroll-view scroll-y class="listContainer" v-if="songsList">
      <view class="listItem" v-for="(item,index) in songsList" :key="index" @click="tapMusicList(index)">
        <view class="index">{{index+1}}</view>
        <view class="musicInfo">
          <view class="musictext">{{item.name}}</view>
          <text class="author">{{item.ar[0].name}} - {{item.al.name}}</text>
        </view>
      </view>
      <view class="bottom"></view>
    </scroll-view>
    <view class="tip" v-else>歌单数据加载中...</view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    name: "item-SongListButtom",
    // 接受歌单详情列表数据
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicDetailList', ['songsList']),
    },

    data() {
      return {

      };

    },
    methods: {
      tapMusicList(i) {

        this.$store.commit('musicDetailList/tapMusicList', i)
      }
    }
  }
</script>

<style>
  text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .listItem {
    display: flex;
    align-items: center;
    height: 100rpx;
    margin: 25rpx 20rpx;
  }

  .musicInfo {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .musicInfo .musictext {

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
  }

  .musicInfo text {
    width: 70vw;

  }

  .index {
    margin: 0 30rpx 0 10rpx;
    width: 50rpx;
    text-align: center;
    color: rgb(150, 150, 150);
  }

  .author {
    color: rgb(150, 150, 150);
    font-size: 24rpx;
  }


  .listContainer {}

  .tip {
    font-size: 28rpx;
    color: #aaa;
    width: 100%;
    margin-top: 50rpx;
    text-align: center;
  }

  .bottom {
    width: 100%;
    height: 1rpx;
    margin-bottom: 90rpx;
  }
</style>
